
{% extends "layouts/base-auth.html" %}
{% load i18n static admin_material %}

{% block body %} bg-gray-200 {% endblock body %}  

{% block content %}

  <main class="main-content  mt-0">
    <div class="page-header align-items-start min-vh-100" style="background-image: url('https://images.unsplash.com/photo-1497294815431-9365093b7331?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1950&q=80');">
      <span class="mask bg-gradient-dark opacity-6"></span>
      <div class="container my-auto">
        <div class="row">
          <div class="col-lg-4 col-md-8 col-12 mx-auto">
            <div class="card z-index-0 fadeIn3 fadeInBottom">
              <div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2">
                <div class="bg-gradient-dark shadow-dark border-radius-lg py-3 pe-1">
                  <h4 class="text-white font-weight-bolder text-center mt-2 mb-0">Sign in</h4>
                  <div class="row mt-3">
                    <div class="col-2 text-center ms-auto">
                      <a class="btn btn-link px-3" href="javascript:;">
                        <i class="fa fa-facebook text-white text-lg"></i>
                      </a>
                    </div>
                    <div class="col-2 text-center px-1">
                      <a class="btn btn-link px-3" href="javascript:;">
                        <i class="fa fa-github text-white text-lg"></i>
                      </a>
                    </div>
                    <div class="col-2 text-center me-auto">
                      <a class="btn btn-link px-3" href="javascript:;">
                        <i class="fa fa-google text-white text-lg"></i>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
              <div class="card-body">
                {% if form.non_field_errors %}
                  {% for error in form.non_field_errors  %}
                    <small class="text-danger mb-3">{{ error }}</small>
                  {% endfor %}
                {% endif %}
                <form method="post" role="form" class="text-start">
                    {% csrf_token %}

                    <div class="input-group input-group-outline my-3">
                        <label class="form-label">Username</label>
                        <input 
                            type="text" 
                            class="form-control"
                            name="{{ form.username.name }}" 
                            id="{{ form.username.id_for_label }}"
                        >
                    </div>
                    <div class="input-group input-group-outline my-3">
                        <label class="form-label">Password</label>
                        <input 
                            type="password" 
                            class="form-control"
                            name="{{ form.password.name }}" 
                            id="{{ form.password.id_for_label }}"
                        >
                    </div>

                  <div class="text-center">
                    <button type="submit" class="btn bg-gradient-dark w-100 my-4 mb-2">Sign in</button>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
      <footer class="footer position-absolute bottom-2 py-2 w-100">
        <div class="container">
          <div class="row align-items-center justify-content-lg-between">
            <div class="col-12 col-md-6 my-auto">
              <div class="copyright text-center text-sm text-white text-lg-start">
                &copy; Creative-Tim coded by <a href="https://app-generator.dev" class="font-weight-bold text-white">App Generator</a>.
              </div>
            </div>
            <div class="col-12 col-md-6">
              <ul class="nav nav-footer justify-content-center justify-content-lg-end">
                <li class="nav-item">
                  <a href="https://www.creative-tim.com?AFFILIATE=128200" class="nav-link text-white" target="_blank">Creative Tim</a>
                </li>
                <li class="nav-item">
                  <a href="https://www.creative-tim.com/presentation?AFFILIATE=128200" class="nav-link text-white" target="_blank">About Us</a>
                </li>
                <li class="nav-item">
                  <a href="https://www.creative-tim.com/blog?AFFILIATE=128200" class="nav-link text-white" target="_blank">Blog</a>
                </li>
                <li class="nav-item">
                  <a href="https://www.creative-tim.com/license?AFFILIATE=128200" class="nav-link pe-0 text-white" target="_blank">License</a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </footer>
    </div>
  </main>

{% endblock content %}


{% block extra_js %}

<script type="application/javascript">
  {% if form.username.errors %}
      notification.danger("{{ form.username.errors }}", 'top', 'right');
  {% endif %}
  {% if form.password.errors %}
      notification.danger("{{ form.password.errors }}", 'top', 'right');
  {% endif %}

  {% if user.is_authenticated %}
      var msg = "You are authenticated as {{ username }}, but are not authorized to " +
          "access this page.Would you like to login to a different account ?"
      notification.warning(msg, 'top', 'right');
  {% endif %}

  {% if form.errors and not form.non_field_errors %}
      {% if form.errors.items|length == 1 %}
          notification.warning("{% trans "Please correct the error below." %}", 'top', 'right');
      {% else %}
          notification.warning("{% trans "Please correct the errors below." %}", 'top', 'right');
      {% endif %}
  {% endif %}

  {% if form.non_field_errors %}
      {% for error in form.non_field_errors %}
          notification.warning("{{ error|clean_text }}", 'top', 'right');
      {% endfor %}
  {% endif %}
</script>

{% endblock extra_js %}